<template>
    <div>
            <el-table
        :data="liveRecordData"
        style="width: 100%">
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="table-expand">
                <el-form-item label="记录ID: ">
                    <span>{{ props.row.record.recordId }}</span>
                </el-form-item>
                <el-form-item label="直播名称: ">
                    <span>{{ props.row.record.liveName }}</span>
                </el-form-item>
                <el-form-item label="直播课程: ">
                    <span>{{ props.row.courseName }}</span>
                </el-form-item>
                <el-form-item label="参加的班级: ">
                    <span>{{ props.row.classNames }}</span>
                </el-form-item>
                <el-form-item label="总人数: ">
                    <span>{{ props.row.totalNumber }}</span>
                </el-form-item>
                <el-form-item label="签到人数: ">
                    <span>{{ props.row.realNumber }}</span>
                </el-form-item>
                <el-form-item label="签到次数: ">
                    <span>{{ props.row.record.liveSignNumber }}</span>
                </el-form-item>
                <el-form-item label="课堂问题数量: ">
                    <span>{{ props.row.record.liveProblemNumber }}</span>
                </el-form-item>
                <el-form-item label="开始时间: ">
                    <span>{{ props.row.record.startTime }}</span>
                </el-form-item>
                <el-form-item label="结束时间: ">
                    <span>{{ props.row.record.endTime }}</span>
                </el-form-item>

                </el-form>
            </template>
            </el-table-column>

            <el-table-column
            label="记录ID"
            prop="record.recordId">
            </el-table-column>

            <el-table-column
            label="直播名称"
            prop="record.liveName">
            </el-table-column>

            <el-table-column
            label="直播课程"
            prop="courseName">
            </el-table-column>

            <el-table-column
            label="开始时间"
            prop="record.startTime">
            </el-table-column>

            <el-table-column
            label="结束时间"
            prop="record.endTime">
            </el-table-column>
        
    </el-table>
    </div>
  
</template>

<script>
import { getMyLiveRecords } from '../../api/live'
  export default {
    data() {
      return {
        liveRecordData: [
        ]
      }
    },
    methods: {
        getRecords() {
            getMyLiveRecords().then(res => {
                if (res.code == 200) {
                    this.liveRecordData = res.data.records
                }
            })
        }
    },
    mounted() {
        this.getRecords()
        console.log(this.liveRecordData)
    }
  }
</script>

<style>
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>